<template>
  <div>
    <img :src="qrcodeDataURL" :alt="alt"/>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QrCodeToURL',
  props: {
    text: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      qrcodeDataURL: ''
    }
  },
  mounted() {
    // const text = 'Hello, Vue3!'
    const width = 200
    const height = 200
    const correctLevel = 'M'

    QRCode.toDataURL({
      text,
      width,
      height,
      correctLevel
    }).then((url) => {
      this.qrcodeDataURL = url
    }).catch((error) => {
      console.error(error)
    })
  }
}
</script>
